<script lang="ts" setup>
    // 当前图标的Map
    const IconMap: string[] = [
        "checkbox-mark",
        "close",
        "arrow-right",
        "arrow-left",
        "arrow-down",
        "arrow-up",
        "photo-fail",
        "photo",
        "date",
        "email",
        "user",
        "delete"
    ];

    const dataBean = reactive<{
        grid: GridInterface[]; // 当前的宫格数据
    }>({
        grid: []
    });

    // 页面挂载
    onMounted(() =>
    {
        // 初始化
        init();
    });

    // 初始化
    const init = (): void =>
    {
        // 当前的宫格数据
        dataBean.grid = IconMap.map((item: string): GridInterface =>
        {
            return {
                iconConfig: {
                    icon: item,
                    size: 30,
                    color: "rgb(144, 147, 153)"
                },
                textConfig: {
                    text: item,
                    fontSize: 14,
                    lineHeight: 20,
                    color: "#909193"
                }
            };
        });
    };

    // 点击事件
    const clickHandler = (argumentsList: Record<string, any>): void =>
    {
        const {data: {iconConfig: {icon = ""}}} = argumentsList || {};

        // 复制当前图标名称
        uni.setClipboardData({
            data: icon,
            success: () =>
            {
                uni.showToast({
                    title: `复制成功：${icon}`,
                    icon: "none"
                });
            }
        });
    };

</script>

<template>
    <!-- 图标 -->
    <u-layout
        :enable-refresh="false"
        title="图标组件示例"
    >
        <!-- 容器 -->
        <view class="container">
            <u-grid
                :data="dataBean.grid"
                :span="3"
                @click="clickHandler"
            />
        </view>
        <!-- //容器 -->
    </u-layout>
    <!-- //图标 -->
</template>

<style lang="scss" scoped>

</style>